@extends('Admin.layout.layout')
@section('content')
 <!-- 自定义js -->
<script src="{{asset('js/plugins/validate/jquery.validate.min.js')}}"></script>
<script src="{{asset('js/plugins/validate/messages_zh.min.js')}}"></script>
<script src="{{asset('js/plugins/layer/layer.min.js')}}"></script>


<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>店铺等级</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <a class="btn btn-sm btn-primary "  data-toggle="modal" data-target="#addModal">新增</a>
                        </div>
                    </div>
                    <table class="table table-striped table-bordered table-hover dataTable" id="editable">
                        <thead>
                            <tr>
                                <th width="15">
                                    <input type="checkbox" class="checkall" name="selectall" />
                                </th>
                                <th>ID</th>
                                <th>文字标识</th>
                                <th>图型标识</th>
                                <th>数字标识</th>
                                <th class="center">成长值</th>
                                <th class="center">备注</th>
                                <th class="center">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(count($list)>0)
                                @foreach($list as $k =>$v)
                            <tr class="gradeX">
                                <th>
                                    <input type="checkbox" class="checkall" name="checkBox" />
                                </th>
                                <td>{{ $v['lv_id'] }}</td>
                                <input type="hidden" value="{{ $v['lv_ico_tag'] }}" class="ico_tag_{{ $v['lv_id'] }}"></td>
                                <td class="txt_tag_{{ $v['lv_id'] }}">{{ $v['lv_txt_tag'] }}</td>
                                <td class="picture_{{ $v['lv_id'] }}">
                                    @for($i=0;$i<$v['lv_ico_tag'];$i++)
                                    <span class="glyphicon glyphicon-star c_yellow"></span>
                                    @endfor
                                </td>
                                <td class="ico_tag_{{ $v['lv_id'] }}">LV {{ $v['lv_ico_tag'] }}</td>
                                <td class="center"><span class="min_grow_{{ $v['lv_id'] }}">{{ $v['lv_min_grow'] }}</span>（含）～<span  class="max_grow_{{ $v['lv_id'] }}">{{ $v['lv_max_grow'] }}</span></td>
                                <td class="center remark_{{ $v['lv_id'] }}">{{ $v['lv_remark'] }}</td>
                                <td class="center">
                                    <a class="btn-xs btn-primary " data-toggle="modal" data-target="#myModal"  data-id="{{$v['lv_id']}}">编辑</a>
                                    <a class="btn-xs btn-danger btnDel" data-toggle="modal" data-id="{{$v['lv_id']}}">删除</a>

                                </td>
                            </tr>
                            @endforeach
                            @else
                                <tr class="no-records-found center"><td colspan="8">没有找到匹配的记录</td></tr>

                            @endif
                        </tbody>
                    </table>
                    <div class="row">
                        @include('Admin.common.paginate', ['page' => $page])

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    商铺标识
                </h4>
            </div>
            <form class="form-horizontal m-t" id="addForm">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">等级标识：</label>
                        <div class="col-sm-4">
                            <input id="lv_txt_tag" name="lv_txt_tag" class="form-control" type="text" placeholder="文字标识">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">图片标识：</label>
                        <div class="col-sm-8 align_left" id="picture">
                            <a class="glyphicon glyphicon-star-empty"></a>
                            <a class="glyphicon glyphicon-star-empty"></a>
                            <a class="glyphicon glyphicon-star-empty"></a>
                            <a class="glyphicon glyphicon-star-empty"></a>
                            <a class="glyphicon glyphicon-star-empty"></a>
                            <span class="help-block m-b-none"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">成长值范围：</label>
                        <div class="col-sm-4">
                            <input id="lv_min_grow" name="lv_min_grow" class="form-control" type="text" placeholder="最低（包含）">
                        </div>
                        <div class="col-sm-4">
                            <input id="lv_max_grow" name="lv_max_grow" class="form-control" type="text" placeholder="最高">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">备注：</label>
                        <div class="col-sm-8">
                            <input id="lv_remark" name="lv_remark" class="form-control" type="text" aria-required="true" aria-invalid="false" class="valid">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" id="btn_submit">
                        确定
                    </button>
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal" >取消
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    编辑等级
                </h4>
            </div>
            <form class="form-horizontal m-t" id="signupForm">
            <div class="modal-body">
                <div class="form-group">
                    <label class="col-sm-3 control-label">等级标识：</label>
                    <div class="col-sm-4">
                        <input id="edit_lv_txt_tag" name="edit_lv_txt_tag" class="form-control" type="text" placeholder="文字标识">
                    </div>

                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">图片标识：</label>
                    <div class="col-sm-8 align_left" id="edit_picture">
                        <a class="glyphicon glyphicon-star-empty ico_1"></a>
                        <a class="glyphicon glyphicon-star-empty ico_2"></a>
                        <a class="glyphicon glyphicon-star-empty ico_3"></a>
                        <a class="glyphicon glyphicon-star-empty ico_4"></a>
                        <a class="glyphicon glyphicon-star-empty ico_5"></a>
                        <span class="help-block m-b-none"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">成长值范围：</label>
                    <div class="col-sm-4">
                        <input id="edit_lv_min_grow" name="edit_lv_min_grow" class="form-control" type="text" placeholder="最低（包含）">
                    </div>
                    <div class="col-sm-4">
                        <input id="edit_lv_max_grow" name="edit_lv_max_grow" class="form-control" type="text" placeholder="最高">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">备注：</label>
                    <div class="col-sm-8">
                        <input id="edit_lv_remark" name="edit_lv_remark" class="form-control" type="text" aria-required="true" aria-invalid="false" class="valid">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" id="btn_submit">
                    确定
                </button>
                <button type="button" class="btn btn-default"
                        data-dismiss="modal" >取消
                </button>
            </div>
            </form>
        </div>
    </div>
</div>

<script>
    $.validator.setDefaults({
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        },
        success: function (element) {
            element.closest('.form-group').removeClass('has-error').addClass('has-success');
        },
        errorElement: "span",
        errorPlacement: function (error, element) {
            if (element.is(":radio") || element.is(":checkbox")) {
                error.appendTo(element.parent().parent().parent());
            } else {
                error.appendTo(element.parent());
            }
        },
        errorClass: "help-block m-b-none",
        validClass: "help-block m-b-none"


    });
    $(document).ready(function () {
        //点击编辑
        $('#myModal').on('show.bs.modal', function (e) {
            edit_id = $(e.relatedTarget).attr("data-id");//编辑时属性的id
            if(edit_id){
                $("#edit_lv_txt_tag").val($(".txt_tag_"+edit_id).text());
                $("#edit_lv_min_grow").val($(".min_grow_"+edit_id).text());
                $("#edit_lv_max_grow").val($(".max_grow_"+edit_id).text());
                $("#edit_lv_remark").val($(".remark_"+edit_id).text());

                var score =$(".ico_tag_"+edit_id).val();
                $("#edit_picture").attr('data-rh-score' ,score);
                for (i=1;i<=score;i++){
                    $('.ico_'+i).addClass('glyphicon-star').removeClass('glyphicon-star-empty');
                }

            }

        })
        // validate signup form on keyup and submit
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#addForm").validate({
            rules: {
                lv_txt_tag: "required",
                picture: "required",
                lv_min_grow: {
                    required: true,
                    digits:true
                },
                lv_max_grow: {
                    required: true,
                    digits:true
                }
            },
            messages: {
                lv_txt_tag: icon + "请输入文字标识",
                picture: icon + "请选择图片标识",
                lv_min_grow: {
                    required: icon+'请输入最低成长值',
                    digits: icon+'最低成长值必须为数字',
                },
                lv_max_grow: {
                    required: icon+'请输入最高成长值',
                    digits: icon+'最高成长值必须为数字',
                },
            },
            submitHandler:function(form){
                var lv_txt_tag = $('#lv_txt_tag').val();
                var picture = $('#picture').attr('data-rh-score');
                var lv_min_grow = $('#lv_min_grow').val();
                var lv_max_grow = $('#lv_max_grow').val();
                var lv_remark = $('#lv_remark').val();
                var lv_num_tag='LV '+ $('#picture').attr('data-rh-score');
                $.ajax({
                    url : '{{Request::url()}}/add',
                    type : 'post',
                    dataType : "json",
                    data : {lv_txt_tag:lv_txt_tag,lv_ico_tag:picture,lv_min_grow:lv_min_grow,lv_max_grow:lv_max_grow,lv_remark:lv_remark,lv_num_tag:lv_num_tag},
                    success : function(data) {
                        if (0 == data.code) {
                            layer.alert("添加成功", {
                                icon: 1
                            }, function () {
                                location.reload();
                            });
                        } else {
                            layer.alert(data.message, {
                                icon: 2
                            });
                        }
                    }
                });
            }
        });


        $("#signupForm").validate({
            rules: {
                edit_lv_txt_tag: "required",
                edit_picture: "required",
                edit_lv_min_grow: {
                    required: true,
                    digits:true
                },
                edit_lv_max_grow: {
                    required: true,
                    digits:true
                }
            },
            messages: {
                edit_lv_txt_tag: icon + "请输入文字标识",
                edit_picture: icon + "请选择图片标识",
                edit_lv_min_grow: {
                    required: icon+'请输入最低成长值',
                    digits: icon+'最低成长值必须为数字'
                },
                edit_lv_max_grow: {
                    required: icon+'请输入最高成长值',
                    digits: icon+'最高成长值必须为数字'
                },
            },
            submitHandler:function(form){
                var lv_txt_tag = $('#edit_lv_txt_tag').val();
                var picture = $('#edit_picture').attr('data-rh-score');
                var lv_min_grow = $('#edit_lv_min_grow').val();
                var lv_max_grow = $('#edit_lv_max_grow').val();
                var lv_remark = $('#edit_lv_remark').val();
                var lv_num_tag='LV '+ $('#edit_picture').attr('data-rh-score');
                $.ajax({
                    url : '{{Request::url()}}/'+edit_id+"/edit",
                    type : 'put',
                    dataType : "json",
                    data : {lv_txt_tag:lv_txt_tag,lv_ico_tag:picture,lv_min_grow:lv_min_grow,lv_max_grow:lv_max_grow,lv_remark:lv_remark,lv_num_tag:lv_num_tag},
                    success : function(data) {
                        if (0 == data.code) {
                            layer.alert("修改成功", {
                                icon: 1
                            }, function () {
                                location.reload();
                            });
                        } else {
                            layer.alert(data.message, {
                                icon: 2
                            });
                        }
                    }
                });
            }
        });

        $('#btn_submit').click(function () {
            if(!$('#picture').attr('data-rh-score')){
                setTimeout(function(){
                    $('#picture').parent().addClass('has-error').removeClass('has-success');
                    $('#picture .help-block').show().html('<i class="fa fa-times-circle"></i> 请选择成长值范围');
                }, 100);
                //return false;
            }
        })
        $('#picture').on('mousedown','.glyphicon',function(){
            var score = $(this).index()+1;
            $(this).parent().attr('data-rh-score' ,score);
            $('.glyphicon').addClass('glyphicon-star-empty').removeClass('glyphicon-star');
            $(this).addClass('glyphicon-star').removeClass('glyphicon-star-empty').prevAll('.glyphicon').addClass('glyphicon-star').removeClass('glyphicon-star-empty');
            $('#picture').parent().removeClass('has-error').addClass('has-success');
            $('#picture .help-block').hide().html('');
        });


        $('#btn_submit').click(function () {
            if(!$('#edit_picture').attr('data-rh-score')){
                setTimeout(function(){
                    $('#edit_picture').parent().addClass('has-error').removeClass('has-success');
                    $('#edit_picture .help-block').show().html('<i class="fa fa-times-circle"></i> 请选择成长值范围');
                }, 100);
                //return false;
            }
        })
        $('#edit_picture').on('mousedown','.glyphicon',function(){
            var score = $(this).index()+1;
            $(this).parent().attr('data-rh-score' ,score);
            $('.glyphicon').addClass('glyphicon-star-empty').removeClass('glyphicon-star');
            $(this).addClass('glyphicon-star').removeClass('glyphicon-star-empty').prevAll('.glyphicon').addClass('glyphicon-star').removeClass('glyphicon-star-empty');
            $('#edit_picture').parent().removeClass('has-error').addClass('has-success');
            $('#edit_picture .help-block').hide().html('');
        });

        $('.btnDel').click(function(){
            var id = $(this).attr('data-id');
            layer.confirm('是否删除？', {
                btn: ['确认', '取消'] //可以无限个按钮
            }, function (index) {
                $.ajax({
                    url: '{{Request::url()}}/'+id+"/delete",
                    type: 'delete',
                    dataType: 'json',
                    data: {'id': id},
                    success: function (data) {
                        if (0 == data.code) {
                            layer.alert("删除成功", {
                                icon: 1
                            }, function () {
                                location.reload();
                            });
                        } else {
                            layer.alert(data.message, {
                                icon: 2
                            });
                        }
                    }
                });
            }, function (index, layero) {
                layer.close(index);
            });
        })

    });
</script>

@endsection